<template>
    <div>
        <Alert type="info">
            <span>批量实时日志</span>
             <Button type="primary" style="float: right;margin-top:-4px" @click="clearLog" >清除日志</Button>
        </Alert>
       <div class="afs_batch_monitor_info" :id="clientId">

       </div>
    </div>
</template>

<style>
  .afs_batch_normal{
      color: #2D8cF0;
  }
  .afs_batch_warn{
      color: #df8f1e;
  }
  .afs_batch_error{
      color: #FA8072;
  }
</style>
<script>
import {getUri,webSocketUri} from "@/libs/tools";
export default {
    name: "batch-monitor",
    data() {
        return {
            ws:null,
            clientId:"afs_batch_content_"+(new Date().getTime()),
            heartBeatConfig:{
                timer:null,
                timeout: 10000,
            }
        };
    },
    methods: {
        clearLog(){
            let content = document.getElementById(this.clientId);
            content.innerHTML="";
        },
        heartReset(){
            clearTimeout(this.heartBeatConfig.timer);
        },
        heartStart(){
            let self = this;
            this.heartBeatConfig.timer = setInterval(()=>{
                self.ws.send("ping");
                console.log("heart data")
            }, self.heartBeatConfig.timeout)
        },
        connectWs(self){
            self.ws= new WebSocket(`${webSocketUri()}/${getUri('batch')}/batchMonitor`);
            if(self.ws) {
                self.ws.onopen = function () {
                    self.heartReset();
                    self.heartStart();
                };
                self.ws.onclose = function () {
                    setTimeout(()=>{self.connectWs(self);},10000)
                };
                self.ws.onerror = function () {
                    setTimeout(()=>{self.connectWs(self);},10000)
                };
                self.ws.onmessage = function (evt) {
                    let content = document.getElementById(self.clientId);
                    if(!content){
                        return ;
                    }
                    let dom = document.createElement("p");
                    let data = JSON.parse(evt.data.replace(/ /g, '\xa0\xa0'));
                    if(data.type==='info'){
                        dom.className="afs_batch_normal";
                    }else if(data.type==='warning'){
                        dom.className="afs_batch_warn";
                    }else{
                        dom.className="afs_batch_error";
                    }

                    let innerStr = [];
                    innerStr.push("<span style='width: 150px'>[")
                    innerStr.push(data.timeStamp);
                    innerStr.push("]&nbsp;&nbsp;&nbsp;</span>")


                    innerStr.push("<span style='width: 50px'>[")
                    innerStr.push(data.type);
                    innerStr.push("]&nbsp;&nbsp;&nbsp;</span>")

                    innerStr.push("<span>[")
                    innerStr.push(data.message);
                    innerStr.push("]</span>")

                    dom.innerHTML = innerStr.join(" ");
                    content.prepend(dom);
                };
            }
        }
    },
    computed: {
    },
    created(){
        this.connectWs(this);
    },
    mounted() {

    },
    beforeDestroy(){
        if(this.ws){
            this.ws.close();
        }
    }
};
</script>
